.message {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background-color: var(--background-color);
  img {
    border-radius: 4px;
  }
  .chat-bubble {
    background-color: white;
    width: fit-content;
    padding: 8px;
    border-radius: 4px;
    position: relative;
    color: #111;
  }
  .message-list {
    overflow-y: auto;
  }
  .sent {
    display: flex;
    justify-content: right;
    flex-direction: row-reverse;


    .chat-bubble{
      color: #111;
      background-color: var(--secondary);
    }
    .chat-bubble::before {
      content: '';
      width: 0;
      position: absolute;
      height: 0;
      right: -4px;
      top: calc(50% - 4px);
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 4px solid  var(--secondary); /* 设置箭头颜色 */
    }

  }
  .received {
    .chat-bubble::before {
      content: '';
      width: 0;
      position: absolute;
      height: 0;
      left: -4px;
      top: calc(50% - 4px);
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-right: 4px solid white; /* 设置箭头颜色 */
    }
    .username{
        zoom: .8;
        color: #999;
    }
  }
}
